<template>
    <div>
      <el-dialog :model-value="teacherDialog" :close-on-click-modal="false" :before-close="handleClose" title="可见老师">
            <div>
              <el-form 
              ref="ruleFormRef"
              :model="ruleForm"
              label-width="40px"
              class="demo-ruleForm"
              size="default"
              status-icon
              style="display: flex;"
            >
              <el-form-item label="部门" style="margin-right:50px">
                <el-select v-model="ruleForm.depid" clearable placeholder="选择部门" @change="depChange">
                    <el-option
                      v-for="item in data.dapInfo"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
              </el-form-item>
              </el-form>
            </div>
             <div class="dialog">
                <el-transfer v-model="teacherid"   @left-check-change="leftChange" @right-check-change="rightChange"  :right-default-checked="teacherid" :titles="['未选', '已选']" :props="{
                    key: 'id',
                    label: 'name',
                }"  :data="data.teacherInfo">
                    <template #default="{ option }">
                        <span>{{ option.name }}</span>
                    </template>
                </el-transfer>
            </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="updatateacher" v-if="props.id"
            >确定</el-button
            >
            <el-button type="primary" @click="submit" v-else
            >确定</el-button
            >
            
          </span>
        </template>
      </el-dialog>
      
    </div>
    </template>
    <script lang='ts' setup>
    import { reactive,toRefs,ref,defineProps,defineEmits  } from 'vue'
    import {departmentlist,teacherList,getLimit,testlimit} from "./../../api/index"
    import {ElMessage} from "element-plus"
    const emits = defineEmits(['update:modelValue','teacherIds'])
    
    const props = defineProps({
      //子组件接收父组件传递过来的值
      id: Number,
      markteachers:Array
    })
    const form =reactive({
        page:1,
        psize:10,
    })
    const data:any=reactive({
      teacherid:[],//穿梭框选择id
      ruleForm:{
        depid:'',//部门id
        testid:''//考试id
      },
      dapInfo:[],//部门列表
      teacherInfo:[],//教师列表
      tids:'',//穿梭id
      markteachersIds:props.markteachers
    })
    
    const {teacherid,markteachersIds,ruleForm}=toRefs(data)
    const teacherDialog = ref(true)
    
    
    
    // 部门列表
    const depList=async()=>{
      const res:any=await departmentlist(form)
      // console.log(res);
      if(res.errCode=='10000'){
          data.dapInfo=res.data.list
      }
      
    }
    depList()
   
    // 老师列表
    const Tlist=async ()=>{
      const res:any=await teacherList({depid:ruleForm.value.depid,psize:100})
      // console.log(res);
      if(res.errCode=='10000'){
          data.teacherInfo.push(...res.data.list)
      }
    }
  
    const limitList=async ()=>{
      const res:any=await getLimit({testid:props.id})
      console.log(res);
      
      if(res.errCode=='10000'){
          data.teacherInfo=res.data
          teacherid.value=res.data.map((item:any)=>item.id)
      }
    }
    // 部门搜索
    const depChange=()=>{
      Tlist()
    }
    
  
    if(props.id){
      limitList()
      Tlist()
    }else{
      Tlist()
      if(markteachersIds.value.length>0){
        teacherid.value=markteachersIds.value.map((item:any)=>item.id)
  }
     
    }
   
  const rightChange=(e:any,i:any)=>{
    teacherid.value = teacherid.value.filter(
      (item: any) => item != i
    );
  }
  const leftChange=(e:any)=>{
    teacherid.value.push(...e)
  
  }
    const handleClose = () => {
      emits('update:modelValue', false) 
    }
    const submit=()=>{
      let arr=teacherid.value.map((item:any)=>({id:item}))
      emits('teacherIds',arr)
      emits('update:modelValue', false) 
    }
    const updatateacher= async()=>{
      let list=[]
      list=teacherid.value.map((item:any)=>({id:item}))
      const res:any=await testlimit({testid:props.id,list})
      if(res.errCode == '10000'){
      ElMessage({
        message:"修改成功",
        type:"success"
      })
      emits('update:modelValue', false) 
    }
      
    }
    
    </script>
    
    <style scoped lang="less">
    :deep(.el-transfer) {
      display: flex;
      justify-content: space-between;
    }
    :deep(.el-transfer-panel) {
      width: 40% !important;
    }
    :deep(.el-transfer__buttons) {
      display: none;
    }
     .el-dialog {
            &.stuadd {
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                margin-top: 5vh;
                height: 80vh;
    
                .el-dialog__body {
                    flex: 1;
                    overflow-y: auto;
                }
            }
        }
    
        textarea {
            height: 100px;
        }
    
        .el-upload-list {
            width: 500px;
        }
    
    </style>